
<nz-modal [(nzVisible)]='visible' [nzContent]='content' (nzOnCancel)='closeModal()' [nzFooter]='null'>

</nz-modal>

<ng-template #content>
    <div class='login'>
        <h2 class="login-title">登录</h2>
        <form nz-form [nzLayout]="'vertical'" [formGroup]="dataForm">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="24">
                    <nz-form-item nz-row>
                        <nz-form-control [nzErrorTip]="errorNameTpl">
                            <nz-input-group [nzPrefix]="prefixUser" nzSize="large">
                                <input
                                    nz-input
                                    formControlName="userName"
                                    type="text"
                                    [(ngModel)]="login.username"
                                    placeholder="请输入登录用户名"
                                />
                            </nz-input-group>
                            <ng-template #prefixUser><i nz-icon nzType="user"></i></ng-template>
                            <ng-template #errorNameTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    用户名不能为空
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nz-row>
                        <nz-form-control [nzErrorTip]="errorPasswordTpl">
                            <nz-input-group [nzPrefix]="prefixPassword" nzSize="large">
                                <input
                                    nz-input
                                    formControlName="password"
                                    type="password"
                                    [(ngModel)]="login.password"
                                    placeholder="请输入登录密码"
                                />
                            </nz-input-group>
                            <ng-template #prefixPassword><i nz-icon nzType="lock"></i></ng-template>
                            <ng-template #errorPasswordTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    登录密码不能为空
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="24">
                    <button
                        nz-button
                        nzBlock
                        [nzType]="'primary'"
                        nzSize="large"
                        (click)="onLoginValid()"
                        [nzLoading]="loadingState"
                        [disabled]="dataForm.invalid || loadingState"
                    >
                        登录
                    </button>
                </div>
            </div>
        </form>
    </div>
</ng-template>



